<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>账户列表</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="openRegisterDialog">注册用户</el-button>
    </div>
    <el-table style="width: 100%" max-height="670" :data="accounts">
      <el-table-column fixed prop="userId" label="用户id" width="100"></el-table-column>
      <el-table-column fixed prop="classId" label="所属/管理的班级" width="200"></el-table-column>
      <el-table-column fixed prop="username" label="用户名" width="180"></el-table-column>
      <el-table-column fixed prop="gender" label="性别" width="80"></el-table-column>
      <el-table-column fixed prop="email" label="email" width="300"></el-table-column>
      <el-table-column fixed label="权限级别" width="100">
        <template slot-scope="scope">
          {{ getRoleName(scope.row.roleId) }}
        </template>
      </el-table-column>
      <el-table-column fixed label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="editAccount(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="normal" @click="log(scope.row)">
            日志
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑用户信息的对话框 -->
    <el-dialog title="编辑用户信息" :visible.sync="editDialogVisible">
      <el-form :model="currentAccount">
        <el-form-item label="用户ID" label-width="140px">
          <el-input v-model="currentAccount.userId" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属/管理的班级" label-width="140px">
          <el-input v-model="currentAccount.classId"></el-input>
        </el-form-item>
        <el-form-item label="用户名" label-width="140px">
          <el-input v-model="currentAccount.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="140px">
          <el-input v-model="currentAccount.email"></el-input>
        </el-form-item>
        <el-form-item label="用户权限" label-width="140px">
          <el-select v-model="currentAccount.roleId" placeholder="请选择权限">
            <el-option label="学生" value="1"></el-option>
            <el-option label="教师" value="2"></el-option>
            <el-option label="管理员" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" label-width="140px">
          <el-input v-model="currentAccount.gender"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>

    <!-- 日志信息的对话框 -->
    <el-dialog title="用户日志" :visible.sync="logDialogVisible">
      <el-table :data="logData" max-height="300" style="width: 100%">
        <el-table-column prop="behaviorId" label="行为ID" width="100"></el-table-column>
        <el-table-column prop="behavior" label="行为" width="100"></el-table-column>
        <el-table-column prop="date" label="时间" width="180"></el-table-column>
        <el-table-column prop="place" label="地点" width="120"></el-table-column>
        <el-table-column prop="userId" label="用户ID" width="100"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="logDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 注册用户对话框 -->
    <el-dialog title="注册用户" :visible.sync="registerDialogVisible">
      <el-form :model="newAccount">
        <el-form-item label="用户名" label-width="140px">
          <el-input v-model="newAccount.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="140px">
          <el-input v-model="newAccount.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="140px">
          <el-input v-model="newAccount.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="所属/管理的班级" label-width="140px">
          <el-input v-model="newAccount.classId" placeholder="请输入班级ID"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="140px">
          <el-select v-model="newAccount.gender" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户权限" label-width="140px">
          <el-select v-model="newAccount.roleId" placeholder="请选择权限">
            <el-option label="学生" value="1"></el-option>
            <el-option label="教师" value="2"></el-option>
            <el-option label="管理员" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="registerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="registerUser">注册</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { getAll, getLog, updateUserInfo, registerUser } from '@/utils/urlManager';
import axios from 'axios';
import '@/utils/InterceptorUtils';

export default {
  name: "AccountManager",
  data() {
    return {
      accounts: [],
      currentAccount: {}, // 当前编辑的用户信息
      newAccount: {
        username: '',
        email: '',
        password: '',
        classId: '',
        gender: '',
        roleId: ''
      }, // 新注册用户的信息
      editDialogVisible: false, // 控制编辑对话框的显示与隐藏
      logDialogVisible: false, // 控制日志对话框的显示与隐藏
      registerDialogVisible: false, // 控制注册对话框的显示与隐藏
      logData: [] // 日志数据
    };
  },
  mounted() {
    this.getAccount();
  },
  methods: {
    getAccount() {
      axios.get(getAll)
        .then((res) => {
          const data = res.data;
          console.log(res.data);

          if (data.data != null) {
            this.accounts = data.data;
          } else {
            this.$message.warning("用户信息为空");
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("用户信息获取失败");
        });
    },
    editAccount(row) {
      this.currentAccount = { ...row };
      this.editDialogVisible = true;
    },
    saveEdit() {
      this.$message.success("用户信息已更新");
      axios.put(updateUserInfo, this.currentAccount)
        .then((response) => {
          if (response.data.data != null) {
            console.log(response.data);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error(err);
        });
      this.editDialogVisible = false;
    },
    log(row) {
      axios.get(getLog, { params: { "userId": row.userId } })
        .then((response) => {
          if (response.data.data != null) {
            this.logData = response.data.data;
            this.logDialogVisible = true;
          } else {
            this.$message.warning("没有日志信息");
          }
        })
        .catch((err) => {
          this.$message.error("获取日志失败");
          console.error(err);
        });
    },
    getRoleName(roleId) {
      const roleMap = {
        1: "学生",
        2: "教师",
        3: "管理员"
      };
      return roleMap[roleId] || "未知";
    },
    openRegisterDialog() {
      this.newAccount = {
        username: '',
        email: '',
        password: '',
        classId: '',
        gender: '',
        roleId: ''
      };
      this.registerDialogVisible = true;
    },
    registerUser() {
      if (!this.newAccount.username || !this.newAccount.email || !this.newAccount.password) {
        this.$message.error("请填写完整的注册信息");
        return;
      }
      axios.post(registerUser, this.newAccount)
        .then((response) => {
          if (response.data.data != null) {
            this.$message.success("用户注册成功");
            this.registerDialogVisible = false;
            this.getAccount(); // 刷新用户列表
          } else {
            this.$message.error(response.data.message || "注册失败");
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("注册失败");
        });
    }
  },
};
</script>

<style scoped>
.box-card {
  height: 95%;
  width: 90%;
}
</style>